<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 检查登录状态
onMounted(() => {
    // 这里可以添加实际的登录状态检查逻辑
    const isLoggedIn = localStorage.getItem('isLoggedIn')
    if (!isLoggedIn) {
        router.push('/login')
    }
})

import HelloWorld from '../components/HelloWorld.vue'
import ImageCom from '../components/ImageCom.vue'
import { ref, reactive, onUpdated } from 'vue'
const value1 = ref('')
const value2 = reactive({ text: '' })
const value3 = ref({ text: '' })

onUpdated(() => {
    console.log(value1.value, value2.text, value3.value.text)
})
function defineEmits(val) {
    value2.text = val
}
</script>

<template>
    <HelloWorld class="red" :value="value1" @update:value="defineEmits">
        这个是匿名插槽
        <template #title>
            这个是具名插槽
        </template>
    </HelloWorld>
    <input type="text" v-model="value1" class="input">
    <input type="text" v-model="value2.text" class="input">
    <input type="text" v-model="value3.text" class="input">
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" width="200" height="200" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />
    <ImageCom src="/image.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" width="200" height="400" />
    <ImageCom src="/image123.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" width="300" height="300" />
    <ImageCom src="/image1111.png" bgColor="#f0f0f0" bgImg="/err.png" showType="cover" />

</template>

<style scoped>
.input {
    width: 100px;
    height: 30px;
}

.login-form {
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    margin: 0 auto;
    padding: 20px;
}
</style>
